<template>
  <view class="notify">
    <!-- 搜索框 -->
    <view class="input-search">
      <view class="input-box" @tap="toSearch">
        <input disabled />
        <view class="wrapper">
          <text class="iconfont iconsousuo2"></text>
          <text class="keyword">搜索信息</text>
        </view>
      </view>
    </view>
    <view class="list-wrap">
      <view
        class="wrap-goods"
        v-for="(item, index) in notifyList"
        :key="index"
        @tap="navTo('/pages/notify/detail', item)"
      >
        <image
          class="img-goods"
          :src="item.image || img_03"
          mode="aspectFill"
        ></image>
        <view class="txt">
          <text class="txt-goods">{{ item.title }}</text>
          <text class="price-goods">￥{{ item.price }}</text>
        </view>
      </view>
    </view>
    <view class="icon_dianhua-wrapper" @tap="handlePhone">
      <image class="icon_dianhua" :src="icon_dianhua" mode="aspectFill"></image>
    </view>
    <rfLoading isFullScreen :active="loading"></rfLoading>
    <tab-bar :current="currentIndex" @change="tabchange" :flag="flag"></tab-bar>
  </view>
</template>
<script>
import tabBar from "@/components/tabbar/index.vue";
import rfLoadMore from "@/components/rf-load-more/rf-load-more";
import { buying, config, search } from "@/api/product";
export default {
  components: { rfLoadMore, tabBar },
  data() {
    return {
      path: "",
      notifyList: [],
      flag: true,
      currentIndex: 2,
      loading: true,
      phone: "",
      img_03: this.$mAssetsPath.img_03,
      icon_dianhua: this.$mAssetsPath.icon_dianhua,
      loadingType: "more",
      page: 1,
      hasLogin: false,
      keyword: "",
      productParams: {
        query: "",
        type: "buying",
        sort: "desc",
      },
    };
  },
  computed: {
    bottom() {
      let bottom = 0;
      /*  #ifdef H5  */
      bottom = 90;
      /*  #endif */
      return bottom;
    },
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.flag = false;
    this.page = 1;
    this.getNewBuyingList("refresh", {});
  },
  // 加载更多
  onReachBottom() {
    if (this.loadingType === "nomore") return;
    this.page++;
    this.getBuyingList(this.loadingType);
  },
  // 每次页面显示 执行该方法
  onLoad(options) {
    this.keyword = options.keyword;
    this.initData();
  },
  methods: {
    tabchange(item) {
      this.$mRouter.push({ route: item.pagePath });
    },
    // 数据初始化
    initData() {
      this.hasLogin = this.$mStore.getters.hasLogin;
      this.config();
      if (this.keyword) {
        this.productParams.query = this.keyword;
        this.getProductList('more',this.productParams);
      } else {
        this.getBuyingList();
      }
    },
    // 获取产品列表
    async getProductList(type, params) {
      await this.$http
        .get(search, {
          query: params.query,
          type: params.type,
          sort: params.sort,
          page: this.page,
        })
        .then(async (res) => {
          let list = res.data.data;
          this.loadingType = list.length < 15 ? "more" : "nomore";
          this.notifyList = [...this.notifyList, ...list];
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async config() {
      await this.$http
        .get(`${config}`, { key: "about" })
        .then(async (res) => {
          this.loading = false;
          this.phone = res.data.phone;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //拨打电话
    handlePhone() {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: this.phone,
        // 成功回调
        success: (res) => {
          console.log("调用成功!");
        },
        // 失败回调
        fail: (res) => {
          console.log("调用失败!");
        },
      });
    },
    // 获取商品分类列表v
    async getBuyingList(type) {
      await this.$http
        .get(`${buying}`, { page: this.page })
        .then(async (res) => {
          let list = res.data.data;
          this.loadingType = list.length < 15 ? "more" : "nomore";
          this.notifyList = [...this.notifyList, ...list];
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async getNewBuyingList(type) {
      await this.$http
        .get(`${buying}`, { page: this.page })
        .then(async (res) => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          let list = res.data.data;
          this.notifyList = list;
          this.loading = false;
        })
        .catch(() => {
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          this.loading = false;
        });
    },
    // 通用跳转
    navTo(route, item) {
      if (!route) return;
      if (!this.hasLogin) {
        this.$mRouter.push({ route: "/pages/public/login" });
      } else {
        this.$mRouter.push({ route, query: { id: item.id } });
      }
    },
    // 跳转至搜索详情页
    toSearch() {
      this.$mRouter.push({
        route: `/pages/index/search/search?data=${JSON.stringify(
          this.path
        )}&type=notify`,
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #fff;
}
.notify {
  .input-search {
    position: fixed;
    background-color: #fff;
    width: 100%;
    border-top: solid 1px #eeeeee;
    border-bottom: solid 1px #eeeeee;
    padding: 0 30upx;
    z-index: 99;
    .input-box {
      width: 100%;
      height: 60upx;
      margin: 20upx 0;
      line-height: 60upx;
      background-color: #eee;
      border-radius: 30upx;
      position: relative;
      display: flex;
      align-items: center;
      .wrapper {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 15%;
        font-size: $font-sm + 2upx;
        color: $font-color-light;
        transform: translate(-50%, -50%);
        .iconsousuo2 {
          font-size: 34upx;
          margin-right: $spacing-base;
        }
      }
      input {
        width: 100%;
        padding-left: 28upx;
        height: 28upx;
        color: #888;
        font-size: 28upx;
      }
    }
  }
  .list-wrap {
    width: 100%;
    padding: 102upx 30upx 0 30upx;
    .wrap-goods {
      width: 100%;
      height: 228upx;
      border-bottom: solid 1px #eee;
      display: flex;
      align-items: center;
      .img-goods {
        width: 160upx;
        height: 160upx;
        margin-right: 20upx;
        border-radius: 10upx;
      }
      .txt {
        height: 160upx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .txt-goods {
          font-size: 30upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          opacity: 1;
        }
        .price-goods {
          font-size: 34upx;
          font-family: DINPro;
          font-weight: bold;
          color: #f91c1c;
          opacity: 1;
        }
      }
    }
  }
  .icon_dianhua-wrapper {
    position: fixed;
    bottom: 125upx;
    right: 30upx;
    .icon_dianhua {
      width: 80upx;
      height: 80upx;
    }
  }
}
</style>
